<template>
    <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane :key="0" :tab="$t('basicInfo')">
            <div :class="$style.form">
                <a-form ref="basicInfoForm" layout="vertical" :label-col="labelCol" :wrapper-col="wrapperCol" :model="basicInfo">
                    <a-form-item :label="$t('name')" name="name" required>
                        <a-input v-model:value="basicInfo.name" :maxlength="30" show-count />
                    </a-form-item>
                    <a-form-item :wrapper-col="wrapperCol">
                        <a-button type="primary" @click="submitBasicInfo" :loading="loading">{{$t('confirm')}}</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </a-tab-pane>
        <a-tab-pane :key="1" :tab="$t('changePwd')">
            <div :class="$style.form">
                <a-form ref="changePwdForm" layout="vertical" :label-col="labelCol" :wrapper-col="wrapperCol" :model="changePwd">
                    <a-form-item label="旧密码" name="oldpassword" required :rules="[{required : true, message : $c('please', 'input', 'password')}]">
                        <a-input type="password" v-model:value="changePwd.oldpassword" :maxlength="30" show-count />
                    </a-form-item>
                    <a-form-item label="新密码" name="password" required :rules="pwdRules">
                        <a-input type="password" v-model:value="changePwd.password" :maxlength="30" show-count />
                    </a-form-item>
                    <a-form-item :wrapper-col="wrapperCol">
                        <a-button type="primary" @click="submitChangePwd" :loading="loading">{{$t('confirm')}}</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </a-tab-pane>
    </a-tabs>
</template>

<script lang="ts" setup>
    import { changePwdApi, updateInfoApi } from '@/api/system/Member';
import { useAuthStore } from '@/store';
import { useI18nStore } from '@/store/i18n';
import { message, Modal } from 'ant-design-vue';
import { ref } from 'vue';
    const labelCol = { span: 12 }
    const wrapperCol = { span: 14 }
    const activeKey = ref(0)

    const i18n = useI18nStore()
    const authStore = useAuthStore()
    const loading = ref(false)


    const basicInfoForm = ref()
    const basicInfo = ref({
        name : authStore.userInfo.name
    })

    async function submitBasicInfo() {
        let params  = await basicInfoForm.value.validate()
        loading.value = true
        updateInfoApi(params).then(res => {
            loading.value = false
            if(res.success) {
                message.success(i18n.t('saveSuccess'))
                for(let k in params) {
                    authStore.userInfo[k] = params[k]
                }
                authStore.setUserInfo(authStore.userInfo)
            }else {
                Modal.error({
                    title : res.msg
                })
            }
        })
    }

    const changePwdForm = ref()
    const changePwd = ref({
        oldpassword : '',
        password : '',
    })

    const pwdRules = [
        {
            required : true,
            validator(rule, value) {
                if(value.length < 6) {
                    return Promise.reject(i18n.t('passwordLengthMoreLess', [6]))
                }

                return Promise.resolve()
            }
        }
    ]

    async function submitChangePwd() {
        let params  = await changePwdForm.value.validate()
        loading.value = true
        changePwdApi(params).then(res => {
            loading.value = false
            if(res.success) {
                message.success(i18n.t('saveSuccess'))
                changePwd.value.oldpassword = ''
                changePwd.value.password = ''
            }else {
                Modal.error({
                    title : res.msg
                })
            }
        })
    }

</script>

<style lang="scss" module>
    .form{
        width: 600px;
    }
</style>